<template>
	<view>
		<newNavBar :shadow="false" :border="false"></newNavBar>
		<!-- 用户信息 -->
		<view
			style="border-bottom-left-radius: 25%;border-bottom-right-radius: 25%;  height: 160px;display: flex;align-self: center; justify-content: center;background-image: linear-gradient(#3851f6 50%,#6fc1ff);">
			<view style="display: flex; flex-direction: column;">
				<view style="align-self: center; ">
					<uni-icons color="#fff" type="contact" size="100"></uni-icons>
				</view>
				<view>
					<text style="font-size: 18px; padding: 5px; color: #fff;">{{userInfo.userCode}}</text>
					<text style="font-size: 18px; padding: 5px; color: #fff;">{{userInfo.userName}}</text>
				</view>
			</view>
		</view>

		<view style="padding-left: 10px; margin: 10px; background-color: #fff; border-radius: 6px;">
		<!-- 	<view class="flex-between" @click="systemInfo('wage')">
				<view style="display: flex; flex-direction: row; align-items: center;">
					<view class="flexRight-icon" :style="{'background-image': 'linear-gradient(#3851f6, #3851f6)' }">
						<uni-icons customPrefix="my-iconfont" type="icon-qianbao" :size="13" color="#ffffff" />
					</view>
					<text>我的绩效</text>
				</view>
				<view style="display: flex; flex-direction: row; align-items: center;">
					<uni-icons type="right" size="16px"></uni-icons>
				</view>
			</view> -->
			<!-- <view class="tab-bar-line"></view> -->

			<view class="flex-between" @click="systemInfo('upa')">
				<view style="display: flex; flex-direction: row; align-items: center;">
					<view class="flexRight-icon" :style="{'background-image': 'linear-gradient(#37c3f6, #3a82f6)' }">
						<uni-icons customPrefix="my-iconfont" type="icon-mima" :size="14" color="#ffffff" />
					</view>
					<text>修改密码</text>
				</view>
				<view style="display: flex; flex-direction: row; align-items: center;">
					<uni-icons type="right" size="16px"></uni-icons>
				</view>
			</view>


			<view class="tab-bar-line"></view>
			<view class="flex-between" @click="systemInfo('sci')">
				<view style="display: flex; flex-direction: row; align-items: center;">
					<view class="flexRight-icon" :style="{'background-image': 'linear-gradient(#3851f6, #3851f6)' }">
						<uni-icons customPrefix="my-iconfont" type="icon-quanjushezhi" :size="18" color="#ffffff" />
					</view>
					<text>系统和更新</text>
				</view>
				<view style="display: flex; flex-direction: row; align-items: center;">
					<uni-icons type="right" size="16px"></uni-icons>
				</view>
			</view>
		</view>

		<view style="padding-left: 10px;  margin: 10px; background-color: #fff; border-radius: 6px;">
			<view class="flex-between">
				<view style="display: flex; flex-direction: row; align-items: center;">
					<view class="flexRight-icon" :style="{'background-image': 'linear-gradient(#9f47f6, #8940f6)' }">
						<uni-icons customPrefix="my-iconfont" type="icon-banben" :size="12" color="#ffffff" />
					</view>
					<text>版本</text>
				</view>
				<text style="word-break: break-all;">{{versionName}}</text>
			</view>
			<view class="tab-bar-line"></view>

			<view v-show="false" class="flex-between">
				<view style="display: flex; flex-direction: row; align-items: center;">
					<view class="flexRight-icon" :style="{'background-image': 'linear-gradient(#ff8b2c, #ff8b2c)' }">
						<uni-icons customPrefix="my-iconfont" type="icon-guanli" :size="14" color="#ffffff" />
					</view>
					<text style="width: 75px;">设备号</text>
				</view>
				<!-- 数字类的字符串无法自动实现换行，必须设置为word-break: break-all; -->
				<text style="word-break: break-all;">{{deviceId}}</text>
			</view>
			<view v-show="false" class="tab-bar-line"></view>
			
			<view class="flex-between">
				<view style="display: flex; flex-direction: row; align-items: center;">
					<view class="flexRight-icon" :style="{'background-image': 'linear-gradient(#3851f6, #3851f6)' }">
						<uni-icons customPrefix="my-iconfont" type="icon-jishuzhichi" :size="16" color="#ffffff" />
					</view>
					<text style="width: 75px;">技术支持</text>
				</view>
				<text>河北增昀网络科技有限公司</text>
			</view>
		</view>

		<view style="padding: 10px;">
			<button :style="{borderRadius: '40px', backgroundColor:mainColor,color: '#fff'}" type="primary"
				@click="logOut">退出登录</button>
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" :content="content"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>

	<newTabBar ref="tabBar"  :tabList="tabList"></newTabBar>
</template>

<script>
	import * as SystemJs from '../../common/system.js'
	import tabBar from '../unit/tabBar.vue'
	import * as configJs from '../../common/config.js'
	export default {
		//声明引用的vue公用组件
		components: {
			tabBar
		},
		data() {
			return {
				mainColor: '',
				userInfo: {
					userCode: '001',
					userName: '管理员'
				},
				versionName: '',
				deviceId: '',
				content: '',
				tabList: [],
				badgeNumber:'0'
			}
		},
		onShow() {
			
			this.mainColor = configJs.baseColor.mainTitleColor;
			var info = "";
			uni.getSystemInfo({
				success: (res) => {
					// this.$refs.alertDialog.open()
					this.versionName = res.appVersion
					this.deviceId = res.deviceId.replace(',', '');
				}
			})
			
			// #ifdef APP-PLUS
			SystemJs.baseInfo.getDeviceInfo()
			this.deviceId = uni.getStorageSync('uuid')
			plus.runtime.getProperty(plus.runtime.appid, (inf) => {
				this.versionName = inf.version
			})
			// #endif
		},
		onLoad() {
			SystemJs.systemJs.showTitleBar('个人中心', false)
			this.tabList = configJs.configData.tabList;
			var obj = configJs.getBaseInfo.getUserInfo();
			if (obj != undefined) {
				this.userInfo.userCode = obj.userCode
				this.userInfo.userName = obj.userName
			}
		},
		methods: {
		
			logOut() {
				uni.reLaunch({
					url: '/pages/main/login'
				})
			},
			navigatorUrl(url, titleName) {
				SystemJs.systemJs.showTitleBar(titleName, true)
				uni.navigateTo({
					url: url
				})
			},
			systemInfo(type) {
				var url;
				if (!SystemJs.systemJs.IsEmpty(type)) {
					switch (type) {
						case "csy":
							url = '/pages/main/checkSystemInfo?versionName=' + this.versionName;
							break;
						case "upa":
							url = '/pages/main/UpdatePassword';
							break;
						case "wage":
							url = '/pages/business/productWage/ProductWageInfo?pageCode=wageinfo&pageName=绩效查询'
							break;
							case "sci":
							url = '/pages/main/systemConfigInfo'
							break;
					}
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style>
	.flex-between {
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-right: 10px;
	}

	.flexRight-icon {
		margin-right: 10px;
		padding-bottom: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		width: 20px;
		height: 20px;
	}
</style>
